@extends('layouts.admin')
@push('morecss')
    <link href="{{ mix('css/admin/material_news.css') }}" rel="stylesheet">
    <link href="//cdn.tudouyu.cn/AdminInspinia/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
          rel="stylesheet">
@endpush

@push('morescript')
    <script type="application/javascript">
        let page_params = {
            @can('admin.wxmass.index')
            url_list: '{{ route('admin.wxmass.index') }}',
            @endcan
            @can('admin.wxmass.create')
            url_add: '{{ route('admin.wxmass.create') }}',
            @endcan
            @can('admin.wxmass.update')
            url_edit: '{{ route('admin.wxmass.update') }}',
            @endcan
            data_taglist:@json($tagList),
            data_mass:@json($massData),
        }
    </script>
    <!-- require page js -->
    <script src="{{ mix('js/admin/wxmass_form.js') }}"></script>
@endpush
@section('content')
    <div class="wrapper wrapper-content animated fadeInRight ecommerce">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>群发编辑</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="{{ route('admin.wxmass.index') }}">返回</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form method="get" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">标题</label>
                                <div class="col-sm-4">
                                    <input type="text" name="title" id="title" value="" class="form-control" v-model="massData.title">
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-4">
                                    <textarea id="description" name="description" v-model="massData.description" class="form-control"></textarea>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">群发筛选方式</label>
                                <div class="col-sm-4">
                                    <select id="filter_type" name="filter_type" class="form-control" v-model="massData.filter_rule.type">
                                        @foreach($filterTypeList as $k => $v)
                                            <option value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="form-group" v-show="massData.filter_rule.type == 'tagid'">
                                <label class="col-sm-2 control-label">用户标签</label>
                                <div class="col-sm-4">
                                    <treeselect v-model="massData.filter_rule.tagid" :options="tag_list" :normalizer="catNormalizer" placeholder="选择用户标签..." />
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <div class="form-group" v-show="massData.filter_rule.type == 'openids'">
                                <label class="col-sm-2 control-label">用户openId列表</label>
                                <div class="col-sm-8">
                                    <input-tag :tags.sync="massData.filter_rule.openids" placeholder="请输入用户openId..."></input-tag>
                                    <span class="help-block m-b-none">记得按回车键确认openId</span>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否开启</label>
                                <div class="col-sm-8">
                                    <div class="checkbox checkbox-primary">
                                        <input id="checkbox2" type="checkbox" v-model="massData.is_open">
                                        <label for="checkbox2">
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">推送时间</label>
                                <div class="col-sm-8">
                                    <div class="col-sm-6">
                                        <vue-datepicker-local v-model="massData.push_time" format="YYYY-MM-DD HH:mm:ss" clearable placeholder="开始时间"></vue-datepicker-local>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">群发消息类型</label>
                                <div class="col-sm-4">
                                    <select class="form-control m-b" name="msg_type" id="msg_type" v-model="massData.msg_type">
                                        @foreach($msgTypeList as $k => $v)
                                        <option value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <!--文本-->
                            <div class="form-group" v-show="massData.msg_type == 'text'">
                                <label class="col-sm-2 control-label">回复内容</label>
                                <div class="col-sm-6">
                                    <textarea id="content" name="content" class="form-control" v-model="massData.content"></textarea>
                                    <span class="help-block m-b-none"></span>
                                </div>
                            </div>
                            <!--图文、图片、语音、视频-->
                            <div class="form-group" v-show="_.includes(['news','image','voice','video'], massData.msg_type)">
                                <label class="col-sm-2 control-label">素材选择</label>
                                <div class="col-sm-6">
                                    <button class="btn btn-primary" v-on:click="showMaterialSelecter" type="button">选择素材</button>
                                </div>
                            </div>
                            <div class="form-group" v-show="_.includes(['news','image','voice','video'], massData.msg_type) && !_.isEmpty(massData.material.media_id)">
                                <label class="col-sm-2 control-label"></label>
                                <div class="col-sm-4">
                                    <material-preview v-bind:material-data="massData.material"></material-preview>
                                </div>
                            </div>
                            <!--卡券消息部分-->
                            <div class="form-group" v-show="massData.msg_type == 'card'">
                                <label class="col-sm-2 control-label" for="card_id">卡券ID</label>
                                <div class="col-sm-6">
                                    <input id="card_id" name="card_id" type="text" v-model="massData.card_id" class="form-control required">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <a class="btn btn-white" href="{{ route('admin.wxmass.index') }}"><i class="fa fa-arrow-left"></i> 返回</a>
                                    <button class="btn btn-primary" v-on:click="save" type="button">保存</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--素材选择弹层-->
    <material-selecter :type="massData.msg_type" v-bind:default-material-data="massData.material" ref="materialSelecterBox" v-on:choice-ok="choiceMaterial"></material-selecter>
@endsection